Skip to content

Task/method badge tokens#132

Merged
greatest0fallt1me merged 4 commits into
CalloraOrg:mainfrom
AugistineCreates:task/method-badge-tokens
Jun 3, 2026
Merged

Task/method badge tokens#132
greatest0fallt1me merged 4 commits into
CalloraOrg:mainfrom
AugistineCreates:task/method-badge-tokens

Conversation

@AugistineCreates
Copy link
Copy Markdown
Contributor

This pr closes #99

Implements highly accessible, token-based, color-blind-safe HTTP method badges for endpoint documentation in ApiDetailPage. The old hard-coded inline ternary (which collapsed all non-GET requests to the same green color) is replaced by centralized, theme-responsive classes and custom variables that ensure robust text contrast and distinct semantic palettes for each HTTP method.

Key Changes

  1. Token-Based Theme Styling (src/index.css):

    • Declared distinct custom CSS properties (--method-{method}-bg, --method-{method}-color, --method-{method}-border) for each standard HTTP method (GET, POST, PUT, DELETE, PATCH).
    • Designed custom color palettes that fully support both Light and Dark themes.
    • Every single combination strictly exceeds the WCAG 2.1 AA requirement of 4.5:1 contrast ratio (reaching over 6:1 on dark theme surfaces and up to 7.8:1 on light theme surfaces), satisfying contrast criterion 1.4.3.
  2. Visual Distinctness & Accessibility:

    • Encapsulated badge styling in centralized CSS classes (.method-badge, .method-badge--get, etc.) instead of hard-coded inline values.
    • Badges now feature a subtle border and clear text labeling for GET, POST, PUT, DELETE, and PATCH. By using explicit text identifiers inside the badges, the meaning is never conveyed by color alone (fully satisfying WCAG 2.1 AA 1.4.1 - Use of Color).
  3. Badges Rendering Integration (src/pages/ApiDetailPage.tsx):

    • Replaced inline ternaries in <span style={{...}}> with modern, dynamic CSS class assignment: className={"method-badge method-badge--" + (ep.method || "get").toLowerCase()}.

Verification Results

  • Ran local package compiler check and production bundle building (tsc -b && vite build) which compiles cleanly without any warnings or errors.
  • Verified exact contrast values across both themes using the design variables.

@drips-wave
Copy link
Copy Markdown

drips-wave Bot commented Jun 2, 2026

@AugistineCreates Great news! 🎉 Based on an automated assessment of this PR, the linked Wave issue(s) no longer count against your application limits.

You can now already apply to more issues while waiting for a review of this PR. Keep up the great work! 🚀

Learn more about application limits

@greatest0fallt1me
Copy link
Copy Markdown
Contributor

Merged via direct push to main (admin)

@greatest0fallt1me greatest0fallt1me merged commit 24c60b5 into CalloraOrg:main Jun 3, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Design distinct, color-blind-safe HTTP method badges for ApiDetailPage endpoints

2 participants